<template>
  <div>
    <!-- 引用高德地图 -->
    <div id="container"></div>
    <!-- <el-button @click="delMarker">删除标记点</el-button> -->
  </div>
</template>

<script lang="ts" setup>
import AMapLoader from "@amap/amap-jsapi-loader";

const map = ref<any>();

onMounted(() => {
  AMapLoader.load({
    key: "	c4a8cbd0c525a01b64cc83c30e020833", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map.value = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
        nightflag: "1", // 开启夜间模式
      });

      // 聚合点
      const points = [
        { weight: 8, lnglat: ["116.506647", "39.795337"] },
        { weight: 1, lnglat: ["116.843352", "40.377362"] },
        { weight: 1, lnglat: ["116.637122", "40.324272"] },
        { weight: 1, lnglat: ["116.105381", "39.937183"] },
        { weight: 1, lnglat: ["116.653525", "40.128936"] },
        { weight: 1, lnglat: ["116.486409", "39.921489"] },
        { weight: 1, lnglat: ["116.658603", "39.902486"] },
        { weight: 1, lnglat: ["116.338033", "39.728908"] },
        { weight: 1, lnglat: ["116.235906", "40.218085"] },
        { weight: 1, lnglat: ["116.366794", "39.915309"] },
        { weight: 1, lnglat: ["116.418757", "39.917544"] },
        { weight: 1, lnglat: ["116.139157", "39.735535"] },
        { weight: 1, lnglat: ["116.195445", "39.914601"] },
        { weight: 1, lnglat: ["116.310316", "39.956074"] },
        { weight: 1, lnglat: ["116.286968", "39.863642"] },
      ];
      var styles = [
        {
          //聚合量在1-10时，聚合点的样式
          url: "@/assets/images/map/blue.png", //图标显示图片的地址
          size: new AMap.Size(32, 32), //图标显示图片的大小
          offset: new AMap.Pixel(-16, -16), //图标定位在地图上的位置相对于图标左上角的偏移值
          textColor: "#fff", //文字的颜色
        },
        {
          //聚合量在11-100时，聚合点的样式
          url: "@/assets/images/map/green.png",
          size: new AMap.Size(32, 32),
          offset: new AMap.Pixel(-16, -16),
          textColor: "#fff",
        },
        {
          //聚合量在101-1000时，聚合点的样式
          url: "@/assets/images/map/orange.png",
          size: new AMap.Size(36, 36),
          offset: new AMap.Pixel(-18, -18),
        },
      ];
      let cluster: any;
      const mapDeviceData = [
        {
          weight: 1,
          lnglat: [116.3283522, 39.866265],
        },
      ];
      //异步加载工具条插件
      // AMap.plugin(["AMap.ToolBar", "AMap.HawkEye", "AMap.Scale"], function () {
      //   //在回调函数中实例化插件
      //   var toolbar = new AMap.ToolBar(); //创建工具条插件实例
      //   map.value.addControl(toolbar); //添加工具条插件到页面
      //   // map.value.addControl(new AMap.HawkEye());  // 地图缩略图
      //   map.value.addControl(new AMap.Scale()); // 地图缩略图

      // });

      // //创建一个 Marker 实例：
      // const marker = new AMap.Marker({
      //   position: new AMap.LngLat(116.39, 39.9), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      //   title: "北京",
      // });

      // //将创建的点标记添加到已有的地图实例：
      // map.value.add(marker);
      // //创建点标记的点击事件
      // marker.on("click", function (event) {
      //   console.log(event);
      // });

      // 创建2个点（设置可以拖动）
      // var m1 = new AMap.Marker({
      //   map: map, //将m1这个点添加到map地图里
      //   draggable: true, //配置点可以拖动
      //   position: new AMap.LngLat(116.482617, 39.929119),
      //   title:'123123'
      // });
      // var m2 = new AMap.Marker({
      //   map: map, //将m1这个点添加到map地图里
      //   draggable: true, //配置点可以拖动
      //   position: new AMap.LngLat(116.3283522, 39.866265),
      // });
      // // 让地图根据覆盖调整地图显示区域
      // // map.value.setFitView()
      // map.value.add(m1);
      // map.value.add(m2);

      // // 线
      // var line =new AMap.Polyline({
      //   strokeColor:"#80d8ff" ,//描边的颜色
      //   isOutline:true,//包含轮廓
      //   outerlineColor:'white',
      // })
      // line.setMap(map)

      // // 文本
      // var text=new AMap.Text({
      //   text:"",
      //   style:{
      //     'background-color':'#29b6f6',
      //     'border-color':'#e1f5fe',
      //     'font-size':"16px"
      //   }
      // })
      // text.setMap(map)

      // // 计算
      // function compute(){
      //   // 得到m1和m2的经纬度
      //   var p1=m1.getPosition()
      //   var p2=m2.getPosition()
      //   // text文本显示在这个经纬度中间
      //   var textPos=p1.divideBy(2).add(p2.divideBy(2))
      //   var distance=Math.round(p1.distance(p2))
      //   var path=[p1,p2]
      //   line.setPath(path)//绘制线
      //   text.setText('距离为'+distance+"米")
      //   text.setPosition(textPos)
      // }
      // compute()
      // // 监听拖动点时触发方法。
      // m1.on("dragging",compute)
      // m2.on("dragging",compute)

      // setTimeout(() => {
      //   map.value.remove(m1);
      // },3000)

      // map.value.plugin(['AMap.MarkerCluster'], () => {
      //   cluster = new AMap.value.MarkerCluster(map.value, mapDeviceData);
      // });
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map.value?.destroy();
});
</script>

<style scoped lang="less">
#container {
  width: 100%;
  height: 500px;
}
</style>
